<template>
  <div id="app">
     <!-- <h1> {{info}}</h1> -->
     <!-- <h1>{{news}}</h1> -->
     <Header/>
     <hello-world/>
          <music/>
       <!-- <router-link exact to="/layout">首页</router-link> -->
     <!-- <router-link exact to="/">首页</router-link> -->
     <!-- <button @click="go">turn to News</button> -->
      <!-- <router-link to="/News">新闻</router-link> -->
     <!-- <VueSlot><h1>想你</h1></VueSlot>
     <VueSlot></VueSlot> -->
         <!-- <new-page >yes</new-page>  -->
     <template>
       <!-- <new-page v-slot:bottom  >hi</new-page > -->
    </template>
    <!-- <HelloWorld :msg="msg" :sendData="sendData"/> -->
    <!-- <FooTeer @change-data="changeme" :msg="msg" :toSon="toSon" /> -->
   <router-view></router-view>
  
  
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
import HelloWorld from "./components/HelloWorld.vue";
import Music from "./components/Music.vue";

// import FooTeer from"./components/FooTeer.vue"
// import VueSlot from"./components/VueSlot.vue"
// import NewPage from"./components/NewPage.vue"

export default {
  name: "App",
  data(){
    return{
msg:"没有一点点爱吗",
info:'never ever',
news:"broooo"

    }
  },
  components: {
    HelloWorld,
    Music
   
    
  },
  methods:{
    sendData(){
this.info="求求了 "
    },
    toSon(){
this.news="you are not alone"
    },
  //  sendData(){
  //     this. senData()
  //  }
  changeme(val){
  this.news=val
  },
  // go(){
  //   this.$router.push("/news")
  // }
  }
};
</script>

<style >

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  /* color: #2c3e50; */
  /* margin-top: 60px; */
}
/* a {
    display: inline-block;
    background-color: pink;
    border: solid 1px black;
    color: white;
    padding: 5px;
    margin: 10px;
 
} */
/* a.router-link-exact-active{
   color:#42b983;
} */
 a.router-link-exact-active  {
  color:#42b983;
} 
     


</style>
